<!DOCTYPE html>
<html lang="zh-cmn-Hans">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>游戏嘉年华</title>
		<link rel="icon" href="favicon.png" type="image/x-icon">

		<script>
			(function(doc, win) { // 适配
				var docEl = doc.documentElement,
					resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
					recalc = function() {
						var clientWidth = docEl.clientWidth
						if(!clientWidth) return
						docEl.style.fontSize = clientWidth / 16 + 'px'
					}
				if(!doc.addEventListener) return
				win.addEventListener(resizeEvt, recalc, false)
				doc.addEventListener('DOMContentLoaded', recalc, false)
			})(document, window)
		</script>

		<style>
			html,
			body {
				margin: 0;
				padding: 0;
				font-size: 20px;
				height: 100vh;
				background: rgb(41, 48, 66);
			}
			
			* {
				overflow: hidden;
			}
			
			#load {
				position: absolute;
				width: 100%;
				top: 50%;
				left: 50%;
				-webkit-transform: translate(-50%, -50%);
				-webkit-transition: opacity 1s 0s;
				pointer-events: none;
			}
			
			#loadTxt {
				margin-top: 20px;
				width: 100%;
				text-align: center;
				font-size: 1.4rem;
				color: #fff;
				line-height: 1;
			}
			
			div.box {
				overflow: hidden;
				position: relative;
				width: 640px;
				height: 1138px;
				max-width: 640px;
				margin: 0 auto;
			}
			
			#video {
				position: absolute;
				top: 0;
				left: 0;
				object-fit: fill;
				background-size: cover;
				overflow: hidden;
				width: 100%;
				height: 100%;
				z-index: 11;
			}
			
			.hide {
				display: none !important;
			}
			
			.show {
				display: block !important;
			}
			
			.box-play-bg {
				width: 100%;
				height: 100%;
			}
			
			.box-play-btn {
				position: absolute;
				top: 41%;
				left: 40%;
				z-index: 10;
				width: 3rem;
				max-width: 100px;
				max-height: 100px;
				height: 3rem;
				transform: translate(-50%, -50%);
				animation: anim-name .4s linear infinite alternate;
				-webkit-animation: anim-name .4s linear infinite alternate;
			}
			
			@keyframes anim-name {
				0% {
					transform: scale(1.2) rotate(0deg);
				}
				100% {
					transform: scale(1) rotate(30deg);
				}
			}
			
			@-webkit-keyframes anim-name {
				0% {
					-webkit-transform: scale(1.2) rotate(0deg);
				}
				100% {
					-webkit-transform: scale(1) rotate(30deg);
				}
			}
			
			.box-shexian {
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 2;
			}
			
			.box-shexian>img {
				position: absolute;
				width: 100%;
				height: 100%;
				display: none;
			}
			
			.box-end {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 100;
				width: 100%;
				height: 100%;
			}
			
			.box-end-bg {
				width: 100%;
				height: 100%;
			}
			
			.box-end-reload,
			.box-end-buy {
				position: absolute;
				bottom: 9%;
				left: 0;
				width: 40%;
				height: 2.8rem;
			}
			
			.box-end-reload {
				left: 8%;
			}
			
			.box-end-buy {
				left: 53%;
			}
		</style>

	</head>

	<body>
		<div id="load">
			<div id="loadTxt">0%</div>
		</div>
		<div class="box hide">
			<div class="box-play box-shexian">
				<img src="">
				<img src="">
				<img src="img/shexian1.png" />
				<img src="img/shexian2.png" />
				<img src="img/shexian3.png" />
				<img src="img/shexian4.png" />
				<img src="img/shexian5.png" />
				<img src="img/shexian6.png" />
				<img src="">
				<img src="">
			</div>
			<img class="box-play box-play-bg" src="img/play-bg.png" />
			<img class="box-play box-play-btn" src="img/play.png" />
			<video class="hide" id="video" playsinline x-webkit-airplay webkit-playsinline x5-video-player-type="h5" 
				x5-video-player-fullscreen="true" preload="auto" src="http://entworks-1251799849.file.myqcloud.com/hua/flash2.mp4">
			</video>

			<div class="box-end hide">
				<img class="box-end-bg" src="img/end.png" />
				<div class="box-end-reload" id="reload"></div>
				<div class="box-end-buy" id="buy"></div>
			</div>
		</div>

		<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<script src="js/fastclick.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				// 去除点击延迟
				FastClick.attach(document.body);
			})
		</script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			;
			(function() { // 页面加载所需图片...
				var imgArr = [
					'img/end.png',
					'img/play.png',
					'img/play-bg.png',
					'img/shexian1.png',
					'img/shexian2.png',
					'img/shexian3.png',
					'img/shexian4.png',
					'img/shexian5.png',
					'img/shexian6.png'
				]
				var loadTxt = document.querySelector('#loadTxt')
				new LoadImg(imgArr, null, function(progress, totalnum) {
					loadTxt.innerHTML = parseInt(progress / totalnum * 100) + '%'
				}, function() {
					document.querySelector('#load').remove()
					document.querySelector('.box').classList.remove('hide')
				}, false)
			})()

			function shexian(animateTime) {
				var $lineImg = $('.box-shexian>img')
				var $lineIndex = 0;
				return setInterval(function() {
					if($lineIndex == $lineImg.length) {
						$lineIndex = 0
					}
					$lineImg.eq($lineIndex++).addClass('show').siblings().removeClass('show')
				}, animateTime || 100) // 这里调整射线一轮的时间(毫秒)
				return time
			}
			$(function() {
				var time = shexian()
				// 视频地址配置
				var $video = $('#video')
				var _video = $video[0]

				_video.load();

				$('.box-play-btn').on('click', function() {
					$video.removeClass('hide')
					var playPromise = _video.play()

					if(playPromise !== undefined) {
						playPromise.catch(function(error) {
							alert('暂不支持该视频源')
							console.log(error)
						});
					}

					$('.box-play').addClass('hide')
					clearInterval(time)
				})

				$video.on('pause', function() {
					// 播放中手动停止播放时
					$('.box-end').removeClass('hide')
					$video.remove()
				}).on('ended', function() {
					// 播放完毕时
					$('.box-end').removeClass('hide')
				})

				$('#reload').on('click', function() {
					window.location = window.location + '?time' + new Date().getTime()
				})
				$('#buy').on('click', function() {
					// 购买门票按钮
					window.location = 'https://ticket.wesai.com/oa/detail/?onlineId=b9ea490ea3c94418a0bb4b39cbd59498'
				})

				var $window = $(window)
				onResize($window)
				$window.on('resize scorll', function() {
					onResize($window)
				})
			})
		</script>
	</body>

</html>